<template>
<!--  传感器参数管理页面-->
  <div class="page">
    <!-- 条件筛选 -->
    <div class="page_filter">
      <el-input v-model="form.sensorCode" clearable placeholder="请输入传感器编号">
        <template slot="prepend">传感器编号</template>
      </el-input>
      <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()">搜索</el-button>
    </div>
    <div class="page_main">
<!--      <el-button icon="el-icon-plus" @click.stop="handleAdd" class="common_btn-small">传感器参数</el-button>-->
      <el-button icon="el-icon-plus" @click.stop="handleAddFile" class="common_btn-small">传感器参数批量导入</el-button>
      <!-- table -->
      <div class="common_btnBox" >
        <i class="iconfont iconzongshu icon-size"></i>
        总数：{{form.total}}
      </div>
      <el-table :data="tableList" border>
        <el-table-column label="序号" fixed width="80">
          <template slot-scope="scope">
            {{getIndex(scope.$index)}}
          </template>
        </el-table-column>
        <el-table-column prop="code" sortable label="编号" min-width="170">
        </el-table-column>
        <el-table-column prop="tclib" label="tclib" :width="columnWidth">
        </el-table-column>
        <el-table-column prop="phix" label="phix" :width="columnWidth">
        </el-table-column>
        <el-table-column prop="mata11" label="mata11" :width="columnWidth">
        </el-table-column>
        <el-table-column prop="mata12" label="mata12" :width="columnWidth">
        </el-table-column>
        <el-table-column prop="mata13" label="mata13" :width="columnWidth">
        </el-table-column>
        <el-table-column prop="mata21" label="mata21" :width="columnWidth">
        </el-table-column>
        <el-table-column prop="mata22" label="mata22" :width="columnWidth">
        </el-table-column>
        <el-table-column prop="mata23" label="mata23" :width="columnWidth">
        </el-table-column>
        <el-table-column prop="mata31" label="mata31" :width="columnWidth">
        </el-table-column>
        <el-table-column prop="mata32" label="mata32" :width="columnWidth">
        </el-table-column>
        <el-table-column prop="mata33" label="mata33" :width="columnWidth">
        </el-table-column>
        <el-table-column prop="dax" label="dax" :width="columnWidth">
        </el-table-column>
        <el-table-column prop="day" label="day" :width="columnWidth">
        </el-table-column>
        <el-table-column prop="daz" label="daz" :width="columnWidth">
        </el-table-column>
        <el-table-column prop="dbx"  show-overflow-tooltip label="dbx" :width="columnWidth">
        </el-table-column>
        <el-table-column prop="dby" show-overflow-tooltip label="dby" :width="columnWidth">
        </el-table-column>
        <el-table-column prop="dbz" show-overflow-tooltip label="dbz" :width="columnWidth">
        </el-table-column>
        <el-table-column prop="bx" show-overflow-tooltip label="bx" :width="columnWidth">
        </el-table-column>
        <el-table-column prop="by" show-overflow-tooltip label="by" :width="columnWidth">
        </el-table-column>
        <el-table-column prop="bz" show-overflow-tooltip label="bz" :width="columnWidth">
        </el-table-column>
        <el-table-column prop="ax" show-overflow-tooltip label="ax" :width="columnWidth">
        </el-table-column>
        <el-table-column prop="ay" show-overflow-tooltip label="ay" :width="columnWidth">
        </el-table-column>
        <el-table-column prop="az" show-overflow-tooltip label="az" :width="columnWidth">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="170">
          <template slot-scope="scope">
            {{scope.row.createTime|formatTimer()}}
          </template>
        </el-table-column>
        <el-table-column prop="operator" label="操作人" width="120">
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="120">
          <template slot-scope="scope">
            <button @click.stop="handleExportFile(scope.row.id)" class="btn_edit">导出</button>
            <el-popconfirm confirmButtonText='好的' cancelButtonText='不用了' icon="" title="确定删除该传感器信息吗？" @confirm="handleDelete(scope.row)">
              <button slot="reference" class="btn_delete">删除</button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="form.page"
        :page-size="form.pageSize"    :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next"  :total="form.total">
      </el-pagination>
    </div>
    <!-- 新增文件编辑弹窗 -->
    <el-dialog :title="dialogTitleFile" :visible.sync="isShowDialogFile" :close-on-click-modal="false" width="520px">
      <el-form ref="newUploadForm" :model="newUploadForm" label-width="80px" label-position="right">
        <el-row>
          <el-col :span="18">
            <el-form-item label="上传文件" prop="fileName">
              <el-input v-model="fileName" :readonly='true' placeholder="文件名" style="width:250px;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-upload class="upload-demo" ref="upload" action="doUpload" :limit="1" :file-list="fileList"
              :before-upload="beforeUpload">
              <el-button slot="trigger" type="primary" plain style="color:white;background:#1990FE">选取参数文件</el-button>
              <!-- <div slot="tip" class="el-upload__tip">只能上传excel文件，且不超过100MB</div>
                    <div slot="tip" class="el-upload-list__item-name">{{fileName}}</div> -->
            </el-upload>
          </el-col>
        </el-row>
        <el-row>
          <el-button icon="el-icon-download" @click.stop="handleOutFile" size="mini" type="primary" style="background:#1990FE ">导入模板下载</el-button>
        </el-row>

      </el-form>
      <!-- 操作按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button class="common_btn-white" @click="cancleSub()">取消</el-button>
        <el-button class="common_btn-defalut" type="primary" @click="validateFormFile">确定</el-button>
      </span>
    </el-dialog>
    <!-- 单个新增 -->
    <!-- 新增编辑弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="isShowDialog" :close-on-click-modal="false" width="520px">
      <!-- 具体form表单 -->
      <el-form label-position="right" ref="form" :rules="rules" :model="currentRow" label-width="100px">
        <el-form-item label="标识" prop="code">
          <el-input v-model="currentRow.code" placeholder="请输入标识"></el-input>
        </el-form-item>
        <el-form-item label="ax" >
          <el-input v-model="currentRow.ax" placeholder="请输入ax"></el-input>
        </el-form-item>
        <el-form-item label="ay" >
          <el-input v-model="currentRow.ay" placeholder="请输入ay"></el-input>
        </el-form-item>
        <el-form-item label="az" >
          <el-input v-model="currentRow.az" placeholder="请输入az"></el-input>
        </el-form-item>
        <el-form-item label="bx">
          <el-input v-model="currentRow.bx" placeholder="请输入bx"></el-input>
        </el-form-item>
        <el-form-item label="by">
          <el-input v-model="currentRow.by" placeholder="请输入by"></el-input>
        </el-form-item>
        <el-form-item label="bz">
          <el-input v-model="currentRow.bz" placeholder="请输入bz"></el-input>
        </el-form-item>
        <el-form-item label="dax" >
          <el-input v-model="currentRow.dax" placeholder="请输入dax"></el-input>
        </el-form-item>
        <el-form-item label="day" >
          <el-input v-model="currentRow.day" placeholder="请输入day"></el-input>
        </el-form-item>
        <el-form-item label="daz" >
          <el-input v-model="currentRow.daz" placeholder="请输入daz"></el-input>
        </el-form-item>
        <el-form-item label="dbx" >
          <el-input v-model="currentRow.dbx" placeholder="请输入dbx"></el-input>
        </el-form-item>
        <el-form-item label="dby" >
          <el-input v-model="currentRow.dby" placeholder="请输入dby"></el-input>
        </el-form-item>
        <el-form-item label="dbz" >
          <el-input v-model="currentRow.dbz" placeholder="请输入dbz"></el-input>
        </el-form-item>
        <el-form-item label="mata11" >
          <el-input v-model="currentRow.mata11" placeholder="请输入mata11"></el-input>
        </el-form-item>
        <el-form-item label="mata12" >
          <el-input v-model="currentRow.mata12" placeholder="请输入mata12"></el-input>
        </el-form-item>
        <el-form-item label="mata13" >
          <el-input v-model="currentRow.mata13" placeholder="请输入mata13"></el-input>
        </el-form-item>
        <el-form-item label="mata21" >
          <el-input v-model="currentRow.mata21" placeholder="请输入mata21"></el-input>
        </el-form-item>
        <el-form-item label="mata22" >
          <el-input v-model="currentRow.mata22" placeholder="请输入mata22"></el-input>
        </el-form-item>
        <el-form-item label="mata23" >
          <el-input v-model="currentRow.mata23" placeholder="请输入mata23"></el-input>
        </el-form-item>
        <el-form-item label="mata31" >
          <el-input v-model="currentRow.mata31" placeholder="请输入mata31"></el-input>
        </el-form-item>
        <el-form-item label="mata32" >
          <el-input v-model="currentRow.mata32" placeholder="请输入mata32"></el-input>
        </el-form-item>
        <el-form-item label="mata33" >
          <el-input v-model="currentRow.mata33" placeholder="请输入mata33"></el-input>
        </el-form-item>
        <el-form-item label="tclib" >
          <el-input v-model="currentRow.tclib" placeholder="请输入tclib"></el-input>
        </el-form-item>
        <el-form-item label="phix" >
          <el-input v-model="currentRow.phix" placeholder="请输入phix"></el-input>
        </el-form-item>
      </el-form>
      <!-- 操作按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button class="common_btn-white" @click="isShowDialog = false">取消</el-button>
        <el-button class="common_btn-defalut" type="primary" @click="validateForm">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  sensorParamQuery,
  sensorParamDelete,
  sensorParamAdd,
  sensorParamAddMore,
  sensorUpdate,
  sensorParamExport
} from '@/services/model/sensor'
import Format from '@/utils/format'
const RULES = {
  code: {
    required: true,
    message: '请输入标识'
  }
}
export default {
  data () {
    return {
      form: {
        page: 1,
        pageSize: 10,
        total: 0,
      },

      rules: RULES, // 表单校验的规则

      tableList: [],
      dialogTitleFile: '参数文件导入',
      currentRow: {}, // 新增数据
      isShowDialogFile: false, // 是否显示弹窗
      isShowDialog: false,
      columnWidth: 150,
      fileList: [],
      fileName: '',
      newUploadForm: {
        fileName: ''
      },
    }
  },
  computed: {
    // 弹窗的title
    dialogTitle () {
      return this.currentRow.id ? '编辑传感器信息' : '新增传感器参数信息'
    },
  },
  filters: {
    // 时间格式化
    formatTimer (timer) {
      return Format(new Date(timer))
    },
  },
  methods: {
    handleOutFile () { // 文件导出
      const { href } = this.$router.resolve({ path: '/statics/SensorSettingTemplate.xlsx' })
      window.open(href)
    },
    cancleSub () { // 取消上传
      this.isShowDialogFile = false
      this.fileName = ''
    },
    beforeUpload (file) { // 上传前 文件校验
      this.files = file
      const extension = file.name.split('.')[1] === 'xls'
      const extension2 = file.name.split('.')[1] === 'xlsx'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!extension && !extension2) {
        this.$message.warning('上传文件只能是 xls、xlsx格式!')
        return
      }
      if (!isLt2M) {
        this.$message.warning('上传文件大小不能超过 2MB!')
        return
      }
      this.fileName = file.name
      return false // 返回false不会自动上传
    },

    // 获取当前的序号
    getIndex (index) {
      let param = (this.form.page - 1) * this.form.pageSize + index + 1
      return param
    },

    // 当前页码改变
      // 分页大小改变
    handleSizeChange (val) {
      this.form.pageSize = val
      this.queryList()
    },
    // 当前页码改变
    handleCurrentChange (val) {
      this.form.page = val
      this.queryList()
    },
    // 确认导入文件
    validateFormFile () {
      this.$refs.newUploadForm.validate(valid => { // 是否通过 表单验证
        if (valid) {
          if (this.fileName === '') {
            this.$message({
              message: '请选择要上传的文件！',
              type: 'warning',
              showClose: true
            })
            return false
          }
          let fileFormData = new FormData()
          fileFormData.append('uploadFile', this.files, this.fileName) // 上传的文件
          sensorParamAddMore(fileFormData).then(res => { // 上传请求
            if (res.code === 200) {
              this.fileName = ''
              this.isShowDialogFile = false
              this.$notify({
                type: 'success',
                title: '提示',
                message: '添加成功'
              })
              this.queryList()
            }
          })
        } else {
          this.$message({
            type: 'warning',
            message: '新增条件有误！',
            showClose: true
          })
        }
      })
    },
    // 新增编辑提交数据
    async submitData () {
      // 根据ID判断使用新增还是编辑
      let action = this.currentRow.id ? sensorUpdate : sensorParamAdd
      let res = await action(this.currentRow)
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: this.currentRow.id ? '修改成功' : '添加成功'
        })
        this.isShowDialog = false
        this.queryList()
        return true
      }
    },
    // 处理删除
    async handleDelete (row) {
      let res = await sensorParamDelete({
        id: row.id
      })
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: '数据已删除'
        })
        this.queryList()
      } else {
        this.$notify({
          type: 'error',
          title: '提示',
          message: '数据删除失败'
        })
      }
    },
    // 新增数据
    handleAdd () {
      this.isShowDialog = true
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    // 表单提交
    validateForm () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submitData()
        }
      })
    },
    // 新增数据
    handleAddFile () {
      this.isShowDialogFile = true
    },
    async handleExportFile(id) {
      await sensorParamExport({idList:id})
    },
    /**
       * row  当前操作行的对象
       */
    async queryList () {
      let res = await sensorParamQuery(this.form)
      this.tableList = res.data?.records || []
      this.form.page = Number(res.data?.current)
      this.form.total = Number(res.data?.total)
    }
  },
  mounted () {

  },
  activated () {
    this.queryList()
  }
}
</script>

<style lang="less" scoped>

</style>
